<template>
  <div v-if="detail">
    <MainSearchDetail v-model="visible"
                      :title="title">
      <div class="cont-left">
        <div class="trash-base">
          <div class="detail-title border-bottom-spot">
            基本信息
          </div>
          <div class="base-cont flex j-between a-center">
            <div class="flex a-center">
              <img class="m-r-10"
                   :src="detail.picture ? detail.picture : toiletPicture">
              <div>
                <p class="m-b-5">
                  {{detail.bigTypeName}}-{{ detail.smallTypeName}}
                  <span class="status">{{detail.status || '- -'}}</span>
                </p>
                <p>{{detail.number || '- -'}}</p>
              </div>
            </div>
            <div class="item">
              <p class="line1 m-b-5"
                 :title="detail.departName">所属机构<span>{{ detail.departName || '- -' }}</span></p>
              <p class="line1"
                 :title="detail.maintain">维护单位<span>{{ detail.maintain || '- -' }}</span></p>
            </div>
            <div class="item">
              <p class="m-b-5">责任人<span>{{ detail.principal || '- -' }}</span></p>
              <p>启用日期<span>{{ detail.date ? detail.date.split(' ')[0] : '- -' }}</span></p>
            </div>
          </div>
          <!-- 8.3暂时隐藏 -->
          <!-- <ul class="run-condition">
              <li>
                <p>
                  <Icon custom="i-icon icon-wuliao"
                        size="22"
                        color="#fff" />
                  <span>物料费用</span>
                </p>
                <p>
                  <label>0</label>
                  元
                </p>
              </li>
              <li>
                <p>
                  <Icon custom="i-icon icon-bianzu6"
                        size="22"
                        color="#fff" />
                  <span>维修费用</span>
                </p>
                <p>
                  <label>0</label>
                  元
                </p>
              </li>
              <li>
                <p>
                  <Icon custom="i-icon icon-dian1"
                        size="22"
                        color="#fff" />
                  <span>用电</span>
                </p>
                <p>
                  <label>0</label>
                  元
                </p>
              </li>
              <li>
                <p>
                  <Icon custom="i-icon icon-shui2"
                        size="22"
                        color="#fff" />
                  <span>用水</span>
                </p>
                <p>
                  <label>0</label>
                  元
                </p>
              </li>
            </ul> -->
          <div class="base-bottom">
            <Icon custom="i-icon icon-dizhi1"
                  size="18"
                  color="#eee" />
            <span>{{detail.site || '- -'}}</span>
          </div>
        </div>
        <div class="trash-left">
          <div class="left-img">
            <img :src="detail.picture ? detail.picture : toiletDetailPicture">
          </div>
          <div class="left-btns">
            <div class="left-btns-item"
                 :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
                 @click.stop="onClickVideo">
              <Icon custom="i-icon icon-jiankong11"
                    size="22" />
              摄像头
            </div>
          </div>
        </div>
      </div>

      <div class="cont-right">
        <div class="toilet-right">
          <div class="toilet-right-bottom">
            <div class="bottom-work">
              <div class="border-bottom-spot work-title">
                <ul>
                  <li @click.stop="onClickDetailToiletWork(0)"
                      :class="{'current':detailToiletWorkIndex == 0}">配置情况</li>
                  <li @click.stop="onClickDetailToiletWork(1)"
                      :class="{'current':detailToiletWorkIndex == 1}">作业记录</li>
                  <DatePicker type="date"
                              style="width: 120px"
                              :value='workDate'
                              v-show="detailToiletWorkIndex == 1"
                              @on-change="onChangeDate"></DatePicker>
                </ul>
              </div>
              <template>
                <div class="config-cont"
                     v-show="detailToiletWorkIndex == 0">
                  <div class="config-cont-item flex">
                    <div class="w-p-50 flex">
                      <img src="../../../../assets/main/personImg1.png">
                      <div class="item-msg">
                        <p>{{configData.persontype || '- -'}}</p>
                        <p>{{configData.name || '- -'}}</p>
                      </div>
                    </div>
                    <div class="w-p-50">
                      <p class="m-b-10">最近保洁</p>
                      <p class="m-b-10">{{configData.work_start_time || '- -'}}</p>
                    </div>
                  </div>
                  <div class="config-cont-item"
                       v-for="(item,index) in configData.equips"
                       :key="index">
                    <img src="../../../../assets/main/Science.png">
                    <div class="item-msg">
                      <p>{{item.equiptype}}</p>
                      <p>{{item.equipcode}}</p>
                    </div>
                  </div>
                </div>

                <div class="work-cont noScroll"
                     v-show="detailToiletWorkIndex == 1">
                  <div class="noData"
                       v-if="workRecordArr.length == 0">
                    <img src="../../../../assets/main/blank_black.png">
                    <p>暂无数据</p>
                  </div>
                  <ul class="work-list">
                    <li class="work-list-item"
                        v-for="(item,index) in workRecordArr"
                        :key="index">
                      <div class="time">{{item.createTime}}</div>
                      <div class="name">{{item.createName}}</div>
                      <div class="cont">
                        {{item.content}}
                      </div>
                      <div class="multimedia">
                        <div class="item video-item"
                             v-previewVideo="item.videourl"
                             v-if="item.videourl">
                          <Icon custom="i-icon icon-bofang"
                                size="25"
                                color='#fff'></Icon>
                        </div>
                        <div class="item"
                             v-for="(items,indexs) in item.imgurls"
                             :key="indexs">
                          <el-image :src="items"
                                    fit="cover"
                                    :preview-src-list="[items]"
                                    class="detail-top-img"
                                    v-if="item.imgurls.length != 0">
                          </el-image>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </template>
            </div>

            <div class="bottom-half-cont">
              <div class="detail-title border-bottom-spot">
                <div>传感监测</div>
              </div>
              <div class="bottom-half-cont-cont">
                <!-- <p class="cont-tab">
                  <span class="current">设备检测</span>
                </p> -->
                <div class="noData"
                     v-if="equiArr.length == 0">
                  <img src="../../../../assets/main/blank_black.png">
                  <p>暂无设备</p>
                </div>
                <ul class="sensor-list">
                  <li class="sensor-list-item"
                      v-for="(item,index) in equiArr"
                      :key="index">
                    <label>{{item.notes}}</label>
                    <span>{{item.code == 200 ? item.value : item.message}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="toilet-right-flow">
            <div class="toilet-right-flow-row1 detail-title border-bottom-spot">
              公厕人流量
              <!--              <div class="toilet-right-flow-row1-right" @click.stop="onClickHistoryTrend">-->
              <!--                <Icon custom="i-icon icon-zoushi" size="16"/>-->
              <!--                历史走势-->
              <!--              </div>-->
            </div>
            <div class="toilet-right-flow-row2">
              <ul class="flex toilet-list">
                <li class="w-p-50">
                  <p class="title">今日人流量</p>
                  <div>
                    <p class="m-b-20">总流量</p>
                    <span>{{rll_intoday}}</span>
                  </div>
                </li>
                <li class="w-p-50">
                  <p class="title">总人流量</p>
                  <div>
                    <p class="m-b-20">
                      <Icon custom="i-icon icon-renqun"
                            size="30"
                            color="#fff" />
                    </p>
                    <span>{{rll_intotal}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </MainSearchDetail>

    <Modal width="1024"
           v-model="historyTrendVisible"
           title="公厕人流量走势图">
      <div class="history-trend">
        <div class="history-trend-title">
          <Select v-model="device"
                  style="width:200px"
                  class="m-r-10">
            <Option v-for="item in deviceList"
                    :value="item.value"
                    :key="item.value">{{ item.label }}</Option>
          </Select>
          <Select v-model="timeSelect"
                  style="width:200px"
                  class="m-r-10">
            <Option v-for="item in timeSelectList"
                    :value="item.value"
                    :key="item.value">{{ item.label }}</Option>
          </Select>
          <Checkbox v-model="meanCheckbox">显示平均值</Checkbox>
        </div>
        <div class="history-trend-cont">
          <div class="cont">
            <div class="cont-title">
              <div>
                <p>人流总数</p>
                <span><span>4001</span>人次</span>
              </div>
              <div>
                <p>单日最多</p>
                <span><span>557</span>人次</span>
              </div>
              <div>
                <p>单日最少</p>
                <span><span>356</span>人次</span>
              </div>
              <div>
                <p>平均值</p>
                <span><span>500</span>人次</span>
              </div>
              <div>
                <p>今日人流量</p>
                <span><span>356</span>人次</span>
              </div>
            </div>
            <div class="cont-echar">
              <Echarts width="960px"
                       height="440px"
                       key="sl"
                       :options="slOptions"></Echarts>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import MainSearchDetail from "../template/MainSearchDetail.vue";
import Echarts from '../../../common/Echarts';
import { formatDate } from '@/utils/dateRangUtil';
export default {
  components: {
    MainSearchDetail,
    Echarts
  },
  data () {
    return {
      visible: false,
      dataId: '',
      title: '',
      detail: {},
      equiArr: [],
      rll_intotal: 0,
      rll_intoday: 0,
      detailToiletWorkIndex: 0,
      historyTrendVisible: false,
      device: '1',
      deviceList: [{
        label: '人流量检测设备20210002',
        value: 1
      }],
      timeSelect: 'week',
      timeSelectList: [{
        label: '近一周',
        value: 'week'
      }, {
        label: '近一月',
        value: 'month'
      }, {
        label: '近一年',
        value: 'year'
      }],
      meanCheckbox: '',
      slOptions: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['05-01', '05-04', '05-07', '05-10', '05-13', '05-16', '05-19']
        },
        yAxis: {
          type: 'value',
          data: [0, 20, 40, 60, 80, 100],
          splitLine: { show: false }
        },
        series: [{
          data: [68, 28, 68, 70, 80, 100, 65, 40, 44],
          type: 'line',
          areaStyle: {
            color: '#517976'
          },
          itemStyle: {
            color: '#517976'
          }
        }],
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0,
          borderWidth: 0
        },
      },
      toiletPicture: require('../../../../assets/main/publicImg1.png'),
      toiletDetailPicture: require('../../../../assets/main/toilet-img.png'),
      // 作业日历
      workRecordArr: [],
      workDate: '',
      configData: {}
    }
  },
  watch: {
    dataId (newVal) {
      if (newVal) {
        this.getDetail()
        this.getTotalConfig()
      }
    },
    visible (newVal) {
      if (!newVal) {
        this.dataId = ''
        this.equiArr = []
        this.detailToiletWorkIndex = 0
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      bus.$on('showMainSearchToiletDetail', data => {
        this.dataId = data.id
        this.title = data.title
        this.visible = true
      })
      this.workDate = formatDate(new Date)
    },
    getDetail () {
      this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
        this.detail = res
        if (this.detail.status == 0) {
          this.detail.status = '正常'
        } else if (this.detail.status == 1) {
          this.detail.status = '废弃'
        } else if (this.detail.status == 2) {
          this.detail.status = '维修'
        } else if (this.detail.status == 3) {
          this.detail.status = '拆除'
        } else if (this.detail.status == 4) {
          this.detail.status = '暂停'
        }
        // 使用详情接口返回的绑定账号的id
        if (this.detail.principalId) {
          this.getWorkRecordList(this.detail.principalId)
        }
      })

      let paramsFaclid = {
        faclid: this.dataId
      }
      this.$http.getHummanTotal(paramsFaclid).then((res) => {
        if (res.code == 200) {
          let data = res.result
          this.rll_intotal = data ? (data.intotal ? data.intotal : 0) : 0
          this.rll_intoday = data ? (data.intoday ? data.intoday : 0) : 0
        }
      })

      this.$http.getDtuByFaclId(paramsFaclid).then((res) => {
        if (res.code == 200) {
          this.equiArr = res.result
        }
      })
    },
    // 获取配置情况
    getTotalConfig () {
      let params = {
        id: this.dataId
      }
      this.$http.getMapTotalConfig(params).then((res) => {
        if (res.code === 200) {
          this.configData = res.result
        }
      })
    },
    // 公厕详情 工作tab切换
    onClickDetailToiletWork (i) {
      this.detailToiletWorkIndex = i
    },
    onClickHistoryTrend () {
      this.historyTrendVisible = true
    },
    // 选择日期
    onChangeDate (date) {
      this.workDate = date
    },
    // 获取作业记录
    getWorkRecordList (id) {
      let params = {
        pageNum: 1,
        pageSize: 99999,
        uId: id,
        nowtime: this.workDate,
      }
      this.$http.getMapWorkRecordList(params).then(res => {
        if (res.code == 200) {
          this.workRecordArr = res.result.data.rows.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
        }
      })
    },
    // 摄像头
    onClickVideo () {
      if (this.detail.videoonlinestatus == 0) {
        let params = {
          equipcode: this.detail.equipcode,
          eqptype: this.detail.eqptype,
          details: this.detail.channels,
        }
        bus.$emit('showPlayVideoModal', params)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/input";
@import "@/scss/iviewCssReset/modal";
@import "@/scss/iviewCssReset/select";

::v-deep {
  .ivu-modal-body {
    padding: 0;
  }
}

.cont-left {
  width: 740px;
  margin-right: 25px;
}
.cont-right {
  width: 440px;
}

.toilet-right {
  .toilet-right-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    .bottom-work {
      margin-bottom: 20px;
      border: 1px solid rgba(255, 255, 255, 0.1);

      .work-title {
        ul {
          display: flex;
          align-items: center;
          flex: 2;
          padding-left: 20px;
          padding: 0 20px;
          line-height: 45px;
          li {
            flex: 1;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
          }
          .current {
            color: #25bb96;
          }
        }
      }

      .work-cont {
        padding: 16px;
        color: #999;
        box-sizing: border-box;
        max-height: 300px;
        overflow-y: auto;
        .work-list-item {
          margin-bottom: 20px;
          .time {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
          }
          .name {
            font-style: 16px;
            color: #999999;
          }
          .cont {
            font-style: 16px;
            color: #999999;
            margin-bottom: 10px;
          }
          .multimedia {
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 32%;
              margin-right: 2%;
              img {
                width: 100%;
              }
            }
            .item:nth-child(3n) {
              margin-right: 0;
            }
            .video-item {
              position: relative;
              background: #797979;
              i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
    // 配置情况
    .config-cont {
      overflow-y: auto;
      max-height: 265px;
      // margin-bottom: 10px;
      font-size: 14px;
      padding: 16px;
      .config-cont-item {
        display: flex;
        color: #eee;
        margin-bottom: 10px;
        img {
          width: 56px;
          height: 56px;
          border-right: 50%;
          margin-right: 10px;
          cursor: default;
        }
        .item-msg {
          p {
            margin-bottom: 10px;
          }
        }
      }
      .config-cont-item:last-child {
        margin-bottom: 0;
      }
    }
    // 传感检测
    .bottom-half-cont {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.1);

      .popup-title {
        div {
          margin-right: 20px;
        }
      }
      .bottom-half-cont-cont {
        .cont-tab {
          display: flex;
          background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(255, 255, 255, 0) 100%
          );
          padding: 0 20px;
          box-sizing: border-box;
          height: 32px;
          span {
            color: #fff;
            display: block;
            box-sizing: border-box;
            height: 100%;
            line-height: 2;
            margin-right: 30px;
            cursor: pointer;
          }
          .current {
            color: #25bb96;
            border-bottom: 2px solid #25bb96;
          }
        }
        .sensor-list {
          padding: 30px 20px;
          font-size: 16px;
          .sensor-list-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            color: #fff;
          }
          .sensor-list-item:last-child {
            margin-bottom: 0;
          }
          // display: flex;
          // flex-wrap: wrap;
          // height: 179px;
          // padding-right: 8px;
          // overflow-y: auto;
          // padding-top: 11px;
          // box-sizing: border-box;
          // .sensor-list-item {
          //   width: calc(33.3% - 8px);
          //   height: 64px;
          //   margin-left: 8px;
          //   border: 1px solid;
          //   border-image: linear-gradient(34deg, #535d64, #77858e, #4b555d) 1 1;
          //   margin-top: 13px;
          //   display: flex;
          //   flex-wrap: wrap;
          //   align-items: center;
          //   align-content: center;
          //   color: rgba(255, 255, 255, 0.2);
          //   label {
          //     display: block;
          //     width: 100%;
          //     text-align: center;
          //     color: rgba(255, 255, 255, 0.85);
          //     margin-bottom: 10px;
          //   }
          //   span {
          //     font-size: 16px;
          //     font-weight: bold;
          //     color: #fff;
          //     display: block;
          //     width: 100%;
          //     text-align: center;
          //   }
          // }
        }
      }
    }
  }

  .toilet-right-flow {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    .toilet-right-flow-row1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .toilet-right-flow-row1-right {
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.3);
        color: rgba(255, 255, 255, 0.65);
        padding: 4px;
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.65);
        font-size: 14px !important;
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .toilet-right-flow-row2 {
      font-size: 16px;
      color: #fff;
      .toilet-list {
        li {
          border-right: 1px solid rgba($color: #fff, $alpha: 0.5);
          .title {
            padding: 15px 20px;
            background: rgba($color: #fff, $alpha: 0.3);
          }
          div {
            padding: 20px;
          }
        }
        li:last-child {
          border-right: 0;
        }
      }
    }
  }
}

.trash-left {
  .left-img {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;

    img {
      width: 496px;
      height: 380px;
    }
  }

  .run-condition {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 11px 0;
    width: 97%;
    margin: 0 auto;

    li {
      flex: 1;

      p {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      p:first-child {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.65);
        margin-bottom: 12px;

        span {
          margin-left: 4px;
        }
      }

      p:last-child {
        color: #fff;

        label {
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 12px;
          margin-right: 7px;
        }
      }
    }
  }

  .left-btns {
    display: flex;
    justify-content: space-around;
    margin: auto;

    .left-btns-item {
      display: flex;
      justify-content: center;
      width: 120px;
      height: 58px;
      background-image: url(../../../../assets/main/btn_bg.png);
      background-size: 100%;
      color: #eee;
      padding-top: 8px;
      cursor: pointer;
    }
  }
}

.trash-base {
  border: 1px solid rgba(255, 255, 255, 0.1);

  .base-cont {
    display: flex;
    padding: 10px 24px;
    color: rgba(255, 255, 255, 0.7);
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .item {
      p {
        span {
          color: #eee;
          margin-left: 5px;
        }
      }
    }
    .status {
      background: rgba(50, 177, 108, 0.3);
      color: #32b16c;
      display: inline-block;
      width: 50px;
      height: 22px;
      border-radius: 10px;
      margin-left: 10px;
      font-size: 12px;
      line-height: 22px;
      text-align: center;
    }
  }

  .base-bottom {
    display: flex;
    align-items: center;
    height: 32px;
    padding-left: 20px;
    color: #a0a0a0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    span {
      margin-left: 4px;
    }
  }
}

.detail-title {
  line-height: 45px;
  color: #eee;
  font-size: 18px;
  padding-left: 20px;
}
.border-top-spot {
  // border-top: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-top-spot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}

.border-bottom-spot {
  // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-bottom-spot::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}

// modal
.history-trend {
  .history-trend-title {
    height: 54px;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding-left: 30px;
    background: #3a3c3e;
  }
  .history-trend-cont {
    height: 564px;
    padding: 16px 30px 26px 30px;
    background: rgba(48, 50, 51, 0.3);
    .cont {
      background: #3a3c3e;
      .cont-title {
        display: flex;
        align-items: center;
        height: 78px;
        margin: 0 40px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        div {
          flex: 1;
          p {
            margin-bottom: 8px;
            color: rgba(255, 255, 255, 0.65);
          }
          span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            span {
              font-size: 20px;
              color: #fff;
              margin-right: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
